<template>
  <div class="Big">

    <el-backtop :right='20' :bottom='400'>
      <!-- 加个标签 -->
      回到顶部
    </el-backtop>
    <VideoCommon ref="mvPlay" :maskFlag='maskFlag' :mvUrl='mvUrl'
      @maskFlagFn='maskFlag = false' :MVval='MVval'>
    </VideoCommon>
    <i class="el-icon-back" @click="$router.back()"></i>
    <div style='width:100%;border: 1px solid rgba(0, 0, 0, 0.2);'>
      <div
        style="font-size:25px;text-align:left;padding-left:30px;margin:20px 0">
        <span> {{details.name}}</span>
        <span v-if="details&&details.transNames&&details.transNames.length!==0"
          style="font-size:20px;margin-left:10px;color:#999">{{details.transNames[0]}}</span>
      </div>
      <div style="position:relative">
        <el-image v-if="details.cover!==undefined"
          style="height:500px;width:100%;vertical-align: middle;"
          :src="details.cover" fit="cover"></el-image>
        <div class="like" @click="like('singer',details)">收藏</div>
      </div>
    </div>

    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot='label' class="label">热门作品</span>
        <div class="songClass" @click="PlayMusic(val)"
          v-for="(val,ind) in songList" :key="ind">
          <span class="over_ellipsis" style="width:50%">
            <span style="margin-right:10px">{{ind+1}}</span>{{val.name}}</span>
          <!-- 歌曲名字 -->
          <span v-ChangeTime>{{val.dt}}</span>
          <!-- 歌曲时间 -->
          <span class="icon">
            <i class="el-icon-video-play icon_content"></i>
            <i class="el-icon-download icon_content"
              @click.stop="download(val.id)"></i>
            <i class="el-icon-star-off icon_content"
              @click.stop='like("music",val)'>
            </i>
          </span>
          <span class="over_ellipsis " style="width:20%">
            <span class="artClass"
              @click="$router.push({name:'album',query:{id:val.al.id}})">{{val.al.name}}</span>
          </span>
          <!-- 专辑  -->
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot='label' class="label">所有专辑</span>
        <div style="min-height:300px">
          <div class="albumClass">
            <el-card :body-style="{ padding: '0px'}"
              style="width:170px;text-align:left;margin-bottom:20px"
              v-for="(val,ind) in album" :key="ind">
              <div style="height:150px;width:100%;position:relative">
                <el-image v-if="album.length!==0"
                  style="height:100%;width:100%;vertical-align:middle;"
                  :src="val.picUrl" fit="cover"></el-image>
                <div class="mask"
                  @click="$router.push({name:'album',query:{id:val.id}})">
                  <i style="font-size:50px; transform:translateY(-70%);"
                    class="el-icon-video-play"></i>
                </div>
              </div>
              <div class="over_ellipsis">{{val.name}}</div>
              <div v-ChangeDate style="font-size:10px;">
                {{val.publishTime}}</div>
            </el-card>
          </div>
          <el-pagination hide-on-single-page :page-size="15"
            :page-sizes='[15,30,45,60,75,90,105,120,135,150]'
            @current-change='Cchange' layout="prev, pager, next"
            :total="details.albumSize">
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot='label' class="label">相关MV</span>
        <div style="min-height:300px">
          <div class="albumClass">
            <el-card :body-style="{ padding: '0px'}"
              style="width:170px;text-align:left;margin-bottom:20px"
              v-for="(val,ind) in mvList" :key="ind">
              <div style="height:150px;width:100%;position:relative">
                <el-image v-if="mvList.length!==0"
                  style="height:100%;width:100%;vertical-align:middle;"
                  :src="val.imgurl" fit="cover"></el-image>
                <div class="mask" @click="mvPlay(val)">
                  <i style="font-size:50px; transform:translateY(-70%);"
                    class="el-icon-video-play"></i>
                </div>
              </div>
              <div class="over_ellipsis">{{val.name}}</div>
              <div style="font-size:10px;">
                {{val.publishTime}}</div>
            </el-card>
          </div>
          <el-pagination hide-on-single-page :page-size="15"
            :page-sizes='[15,30,45,60,75,90,105,120,135,150]'
            @current-change='MVchange' :total="details.mvSize">
          </el-pagination>
        </div>
      </el-tab-pane>

      <el-tab-pane>
        <span slot='label' class="label">艺人介绍</span>
        <div style="min-height:300px">
          <div style="margin-bottom:10px">
            <div
              style="font-size:20px;font-weight:bold;text-align:left;margin-bottom:10px">
              {{details.name}}简介</div>
            <div style="text-align:left;line-height:25px;color:#666">
              {{describe.briefDesc}}</div>
          </div>
          <div style="margin-bottom:10px;white-space: pre-wrap;"
            v-for="(val,ind) in describe.introduction" :key='ind'>
            <div
              style="font-size:20px;font-weight:bold;text-align:left;margin-bottom:10px">
              {{val.ti}}</div>
            <div style="text-align:left;line-height:25px;color:#666">
              {{val.txt}}</div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { singerAllSong, singerDetails, singerDescribe, singerAlbum, singerMV } from '../../api/Singer'
import VideoCommon from '../../components/VideoComponent.vue'
import { PlayMusic, MvPlay } from '../../api/Play.js'
import download from '../../../node_modules/downloadjs/download.js'
export default {
  name: '',
  data () {
    return {
      singerId: this.$route.query.id,
      // 歌手id：从上一页传过来的id
      songList: [],
      details: {},
      // 歌手详情
      describe: [],
      // 歌手描述
      album: [],
      // 歌手专辑
      albumOffset: 0,
      // 专辑偏移量
      mvList: [],
      // mv列表
      mvOffset: 0,
      // mv偏移量
      maskFlag: false,
      // mv是否显示
      mvUrl: '',
      MVval: ''
    };
  },
  async created () {
    if (this.singerId == 0) {
      this.ErrorAlert('不存在该歌手')
      return this.$router.go(-1)
    }
    let res = await singerAllSong({ id: this.singerId, limit: 55 })
    this.songList = res.data.songs
    // 获取该歌手的所有歌曲
    let res2 = await singerDetails({ id: this.singerId })
    this.details = res2.data.data.artist
    // 获取歌手详情
    let res3 = await singerDescribe({ id: this.singerId })
    this.describe = res3.data
    // 艺人介绍
    let res4 = await singerAlbum({ id: this.singerId, limit: 15 })
    this.album = res4.data.hotAlbums
    // 专辑
    let res5 = await singerMV({ id: this.singerId, limit: 15 })
    this.mvList = res5.data.mvs
    // mv
  },
  methods: {
    PlayMusic (val) {
      PlayMusic({ id: val.id }).then((res) => {
        // 播放之前检查一下能不能播
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法播放')
        // 若没有url或音乐时间小于60秒则判定为无法播放
        this.$router.push({ name: 'play', query: { val: JSON.stringify(val), url: JSON.stringify(res.data.data[0].url) } })
        // 由于传参无法传复杂数据类型,所以先转化为字符串
      }).catch((err) => {
        console.log(err);
      })
    },
    async mvPlay (val) {
      let res = await MvPlay({ id: val.id })
      // 获取播放地址
      this.MVval = val
      this.mvUrl = res.data.data.url
      this.maskFlag = true
      this.$refs.mvPlay.mvPlay()
    },
    download (id) {
      // 下载
      PlayMusic({ id: id }).then((res) => {
        // 播放之前检查一下能不能播
        if (res.data.data[0].url == null || Math.floor(res.data.data[0].time / 1000) / 60 < 1) return this.ErrorAlert('歌曲无法下载')
        // 若没有url或音乐时间小于60秒则判定为无法播放
        download(res.data.data[0].url)
      }).catch((err) => {
        this.ErrorAlert('下载失败')
      })
    },
    like (date, val) {
      let local = JSON.parse(localStorage.getItem('UserInfoList'))[date]
      if (Boolean(local.find((val2) => val2.id == val.id))) {
        return this.ErrorAlert('已收藏过')
      }
      if (date == 'music') {
        this.$store.dispatch('Change', ['music', {
          id: val.id,
          title: val.name,
          name: val.ar,
          dt: val.dt
        }])
        this.ErrorAlert('收藏歌曲成功', 'success')
      }
      if (date == 'singer') {
        this.$store.dispatch('Change', ['singer', {
          id: val.id,
          title: val.name,
          songNum: val.musicSize
        }])
        this.ErrorAlert('收藏歌手成功', 'success')
      }
    },
    async Cchange (e) {
      // 点击下面分页触发e为点击得页数
      this.albumOffset = e - 1
      let res4 = await singerAlbum({ id: this.singerId, limit: 15, offset: this.albumOffset * 15 })
      this.album = res4.data.hotAlbums
    },
    async MVchange (e) {
      // mv分页
      this.mvOffset = e - 1
      let res5 = await singerMV({ id: this.singerId, limit: 15, offset: this.mvOffset * 15 })
      this.mvList = res5.data.mvs
    },
    ErrorAlert (mes, ty = 'error') {
      // 错误提示
      return this.$message({
        message: mes,
        duration: 700,
        type: ty
      });
    },
  },
  components: { VideoCommon },

  props: {},

  watch: {
  },

  computed: {},

}

</script>
<style scoped >
.el-backtop {
  /* 美化一下回到顶部按钮 */
  z-index: 1;
  border: 1px solid rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  background-color: black;
  width: 50px;
  height: 200px;
  border-radius: 10px;
}
.el-icon-back {
  font-size: 80px;
  position: absolute;
  left: 70px;
  top: 85px;
  cursor: pointer;
  color: #999;
}
.el-icon-back:hover {
  color: black;
}
.Big {
  margin: 0 auto;
  width: 1000px;
  /* padding: 0 100px; */
  margin-bottom: 100px;
}
.label {
  display: inline-block;
  margin: 0 60px;
}
.songClass {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}
.songClass:nth-child(2n-1) {
  background-color: rgb(228, 228, 228);
}
.songClass:nth-child(2n-1) .icon {
  color: rgb(228, 228, 228);
}
.songClass:hover {
  background-color: black;
  color: white;
}
.over_ellipsis {
  /* 超出省略 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.icon {
  font-size: 20px;
  margin-right: 10px;
  color: white;
}

.icon_content:hover {
  color: red;
}
.mask {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  font-size: 50px;
  color: white;
  text-align: center;
  padding-top: 50%;
}
.mask:hover {
  transition: all 0.2s ease;
  opacity: 1;
}
.albumClass {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.artClass {
  margin-right: 10px;
}
.artClass:hover {
  color: red;
}
.like {
  position: absolute;
  width: 100px;
  height: 50px;
  line-height: 50px;
  font-size: 30px;
  border-radius: 25px;
  z-index: 2;
  right: 5px;
  bottom: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}
.like:hover {
  color: red;
}
</style>